<template>
  <div class="my-form">
    <el-form :model="myform" :rules="myrules" :ref="fname" label-width="100px">
      <el-form-item
        v-for="f in Object.values(myform.f)"
        :key="f.label"
        :label="f.label"
        :prop="f.prop"
      >
        <span v-if="f.type === 'input'">
          <my-input
            @value="getValue(f.prop, $event)"
            :ph="f.setting.ph"
            :width="f.setting.width"
            :value="f.setting.value"
          ></my-input>
        </span>
        <span v-else-if="f.type === 'select'">
          <my-select
            @value="getValue(f.prop, $event)"
            :ph="f.setting.ph"
            :items="f.setting.items"
            :width="f.setting.width"
          ></my-select>
        </span>
        <span v-else-if="f.type === 'textarea'">
          <my-textarea
            @value="getValue(f.prop, $event)"
            :ph="f.setting.ph"
            :rows="f.setting.rows"
            :width="f.setting.width"
          ></my-textarea>
        </span>
        <span v-else-if="f.type === 'text'">
          {{ f.setting.text }}
        </span>
        <span v-else-if="f.type === 'radio'">
          <el-radio-group v-model="radio">
            <el-radio :label="1">低</el-radio>
            <el-radio :label="2">中</el-radio>
            <el-radio :label="3">高</el-radio>
            <el-radio :label="4">紧急</el-radio>
          </el-radio-group>
        </span>
        <span v-else-if="f.type === 'button'">
          <my-button></my-button>
        </span>
      </el-form-item>
      <el-form-item>
        <div style="float: right">
          <div
            style="margin-right: 15px; display: inline-block"
            @click="resetForm(fname)"
            v-if="clear"
          >
            <el-button type="text">清空</el-button>
          </div>
          <div style="margin-right: 15px; display: inline-block" @click="close">
            <my-button>取 消</my-button>
          </div>
          <div style="display: inline-block" @click="submitForm(fname)">
            <my-button :color="true">确 定</my-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyInput from "@/components/MyInput/MyInput";
import MyTextarea from "@/components/MyInput/MyTextarea";
import MySelect from "@/components/MyInput/MySelect";
import MyButton from "@/components/MyInput/MyButton";
export default {
  props: ["myform", "myrules", "fname", "success", "clear"],
  components: {
    MyInput,
    MyTextarea,
    MySelect,
    MyButton,
  },
  created() {},
  data() {
    return {
      radio: "",
      form: {},
    };
  },
  methods: {
    getValue(prop, value) {
      console.log(prop);
      console.log(value);
      this.form.prop = value;
      this.$emit("value", { propname: prop, valuename: value });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: this.success,
            type: "success",
          });
          this.close();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    close() {
      this.$emit("close", false);
    },
  },
};
</script>

<style>
.my-form {
  overflow: auto;
}
</style>